<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
            <el-form-item label="" prop="status">
              <el-select v-model="queryParams.status" placeholder="账户使用状态" clearable style="width: 160px">
                  <el-option label="停用" value="disable" />
                  <el-option label="启用" value="enable" />
              </el-select>
          	</el-form-item>
            <el-form-item label="" prop="mccids">
				<el-select v-model="queryParams.mccids" placeholder="请选择管家账户" multiple filterable clearable >
					<el-option v-for="item in manageList" :key="item.userId" :label="item.userName" :value="item.userId" />
				</el-select>
			</el-form-item>
            <el-form-item label="" prop="id_name">
                <el-input v-model="queryParams.id_name" placeholder="请输入账户名称/ID" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="remark">
                <el-input v-model="queryParams.remark" placeholder="请输入账户备注" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="real_name">
				<el-select v-model="queryParams.allocate_user_ids" placeholder="请选择投放人" multiple filterable clearable >
					<el-option v-for="item in launchList" :key="item.id" :label="item.real_name" :value="item.id" />
				</el-select>
			</el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row type="flex" class="row-bg mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5"></el-col>
            <el-col :span="1.5">
                <el-button type="primary"  icon="el-icon-download" size="mini" @click="handleExport">下载</el-button>
            </el-col>
        </el-row>
      
        <el-table v-loading="loading" :data="tableList">
            <el-table-column label="所属渠道" align="center" prop="level3_channel_name" :show-overflow-tooltip="true" />
            <el-table-column label="管家名称" align="center" prop="fatname" :show-overflow-tooltip="true" />
            <el-table-column label="账户ID" align="center" prop="userid" />
            <el-table-column label="账户名称" align="center" prop="username" :show-overflow-tooltip="true" />
            <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
            <el-table-column label="账户使用状态" align="center" key="status">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                        active-value="enable"
                        inactive-value="disable"
                        @change="handleStatusChange(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="是否直播间账户" align="center" key="live">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.is_live"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleLiveChange(scope.row)"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="投放人" align="center" prop="allocate_user_name" :show-overflow-tooltip="true" />
            <el-table-column label="最近更新时间" align="center" prop="update_time" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="allocat(scope.row)">分配投放人</el-button>
                    <!-- <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="allocat(scope.row.id)" :disabled="scope.row.allocate_user_id !== null">分配投放人</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <el-dialog title="设置投放人" :visible.sync="dialogVisible"  width="300px">
            <div>
                <el-select v-model="launch.allocate_user_id" placeholder="请选择">
                    <el-option
                    v-for="item in launchList"
                    :key="item.id"
                    :label="item.real_name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addLaunch">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getManageList, getAccountList, getLaunchList, planSave, accountStatus,setIsLive } from "@/api/placement";
import { getCurDate } from "@/utils/index"

export default {
    data() {
        return {
            loading: true,	// 遮罩层
            manageList:[],
            queryParams: {
                page: 1,
                pageSize: 20,
            },
            tableList:[],
            total:0,
            dialogVisible:false,
            launch: {aifanfan_account_ids: [],allocate_user_id:''},
            launchList: []
        };
    },
    created() {
        this.getManage()
        this.getList()
        this.getLaunchList()
    },
    methods: {
        /** 下拉管家 **/
        getManage(){
            getManageList().then(res => {
                this.manageList = res.data
            })
        },
        /** 下拉投放人 **/
        getLaunchList(){
            getLaunchList().then(res => {
                this.launchList = res.data
            })
        },
        getList() {
            this.loading = true
            getAccountList(this.queryParams).then(res => {
				this.tableList = res.data.data
				this.total = res.data.total;
				this.loading = false;
			});
        },
        /** 搜索按钮操作 **/
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 **/
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 导出按钮操作 **/
        handleExport() {
            this.download('aifanfan/exportAccountExcel', {
                ...this.queryParams
            }, `投放账户管理${getCurDate('')}.xlsx`)
        },
        // 是否直播间账户修改
        handleLiveChange(rows){
            setIsLive({
                id:rows.id,
                is_live:rows.is_live==0?0:1
            }).then(res=>{
               this.$message.success('修改成功')
               setTimeout(() => {
                this.getList()
               }, 300);
            }).catch((err)=>{
                setTimeout(() => {
                this.getList()
               }, 300);
            }
            )
        },
         // 用户状态修改
        handleStatusChange(rows) {
            let text = rows.status === "enable" ? "启用" : "停用";
            const params = {
                id: rows.id,
                status: rows.status === 'enable' ? 'enable' : 'disable'
            }
            this.$modal.confirm('确认要' + text + rows.username + '"吗？').then(function() {
                return accountStatus(params);
            }).then(() => {
                this.$modal.msgSuccess(text + "成功");
            }).catch(function() {
                rows.status = rows.status === 'disable' ? 'enable' : 'disable'
            });
        },
        allocat(row){
            this.launch.allocate_user_id = row.allocate_user_id
            this.launch.aifanfan_account_ids = [row.id]
            this.launch.type = 'user'
            this.dialogVisible = true
        },
        addLaunch(){
			planSave(this.launch).then(res => {
				this.$message.success('分配成功');
				this.getList()
				this.dialogVisible = false
                this.launch = { aifanfan_account_ids: [],allocate_user_id:''}
			});
        }
    }
};
</script>

